<!--
 $ @Author: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @Date: 2022-06-30 21:38:21
 $ @LastEditors: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @LastEditTime: 2022-07-03 16:36:13
 $ @FilePath: \st-ssm.github.io\src\main\java\com\stssm\github\io\javaweb\aaa013JDBC2022年6月30日\aaa055表单案例.html
 $ @Description: 1111
 $ @
 $ @Copyright (c) 2022 by liujiajun 45444154+wo1261931780@users.noreply.github.com, All Rights Reserved.
 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.showLabel {
				width: 80px;
				display: inline-block;
				color: grey;
			}
		</style>
	</head>
	<body>
		<div>我是表单案例</div>
		<form action="#" id="demoform" method="get">
			<label for="demo1" class="showLabel">账号：</label>
			<input type="text" id="demo1" />
			<br />
			<label style="color: red; display: none" name="tip" id="tip1"
				>用户名不符合规则</label
			>
			<br />
			<label for="demo2" class="showLabel">密码：</label>
			<input type="password" id="demo2" />
			<br />
			<label style="color: red; display: none" name="tip" id="tip2"
				>密码不符合规则</label
			>
			<br />
			<label for="demo3" class="showLabel">手机号：</label>
			<input type="password" id="demo3" />
			<br />
			<label style="color: red; display: none" name="tip" id="tip3"
				>手机号码格式不符合规则</label
			>
			<br />
			<!-- <input type="button" value="提交" type="submit" id="demoform2" /> -->
			<!-- 这里多了一行，导致一直报错 -->
			<input value="提交" type="submit" id="demoform2" />
		</form>
		<script>
			// document.getElementById("demo1").onclick = function () {
			// 	console.log("我自动对焦了");
			// };
			// document.getElementById("demo1").onblur = function () {
			// 	console.log("我失去了焦点");
			// };
			// -------------------------------------------------------
			// 上面这种方法都不太好,我的目的是操作这个变量,
			// 那么我可以将这个变量直接提取出来
			var demoinput = document.getElementById("demo1");
			demoinput.onclick = function () {
				console.log("我自动对焦了");
			};
			demoinput.onblur = function () {
				console.log("我失去了焦点");
				var paw = demoinput.value.trim();
				console.log("我是密码：" + paw);
				// 同时，我也可以直接通过js获取内部的值
				console.log(paw.length); // 这里有问题
				if (paw.length >= 6 && paw.length <= 12) {
					console.log("正常");
					document.getElementById("tip1").style.display = "none";
				} else {
					alert("异常");
					document.getElementById("tip1").style.display = "";
				}
			};
			// -------------------------------------------------------
			var demopaw = document.getElementById("demo2");
			demopaw.onclick = function () {
				console.log("我自动对焦了");
			};
			demopaw.onblur = checkPaw; // 方法的基本改造
			function checkPaw() {
				// 将名称独立出来
				console.log("密码框失去了焦点");
				var respaw = demopaw.value.trim();
				var resBoolean = respaw.length > 6; // 同时，独立一个变量来接受布尔结果
				if (resBoolean) {
					console.log("正常");
					document.getElementById("tip2").style.display = "none";
				} else {
					console.log("异常");
					document.getElementById("tip2").style.display = "";
				}
				return resBoolean; // 返回结果，是为了方便其他地方的调用
				// 方法的使用不局限于内部的功能
				// 如果其他地方的调用，需要根据方法结果来综合判断，这才是返回结果的终极作用
			}
			// -------------------------------------------------------
			// 在idea中，可以选中以后进行替换操作，
			// 这样替换的区域就是选中的区域，可以提高速度
			var demotel = document.getElementById("demo3");
			demotel.onblur = checkTel;
			function checkTel() {
				console.log("手机号失去了焦点");
				var restel = demotel.value.trim();
				var res = restel.length == 11;
				if (res) {
					console.log("正常");
					document.getElementById("tip3").style.display = "none";
				} else {
					console.log("格式异常");
					document.getElementById("tip3").style.display = "";
				}
				return res;
			}
			// -------------------------------------------------------
			var demoform2 = document.getElementById("demoform");
			// demo.onsubmit = checkValue;//方法如果直接连接在后面，是可以不设置名称的
			// function checkValue() {// ，但是独立出来，定义名称的过程和java类似
			demoform2.onsubmit = function () {
				console.log("我是提交事件");
				// if (checkPaw && checkTel) {
				// 	console.log("可以执行提交操作");
				// 	return true;
				// } else {
				// 	console.log("校验异常");
				// 	alert("校验异常");
				// 	return false;
				// }
				// 上面的写法太复杂了，可以直接根据结果来校验
				// -------------------------------------------------------
				let demoshow = checkPaw() && checkTel();

				return demoshow;
			};
		</script>
	</body>
</html>
